<template>
    <div>
        首页
        {{name}}
        <button @click="Test">点击</button>
        <div>
            <p>用watch实现过滤</p>
            <input type="text" v-model="keyWork" placeholder="请输入内容">
        </div>
        <ul>
            <li v-for="(item,index) in fielPerson" :key="index">
                {{item.name}} - {{item.sex}} - {{item.age}}
            </li>
        </ul>


        <div style="marginTop:20px;">
            <p>用计算属性实现过滤</p>
            <input type="text" v-model="keyWork2" placeholder="请输入内容">
            <button @click="handSort(0)">原顺序</button>
            <button @click="handSort(1)">升序</button>
            <button @click="handSort(2)">降序</button>
            <ul>
            <li v-for="(item,index) in filePerson2" :key="index">
                {{item.name}} - {{item.sex}} - {{item.age}}
            </li>
        </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name: '李白',
            personList: [
                {
                    name: "马冬梅",
                    age: 24,
                    sex: "女"
                },
                {
                    name: "马小梅",
                    age: 22,
                    sex: "女"
                },
                {
                    name: "周杰伦",
                    age: 30,
                    sex: "男"
                }
            ],
            keyWork: "",
            keyWork2: "",
            fielPerson: [],
            sortType:0,
        }
    },

    watch:{
        keyWork: {
            immediate:true,
            handler(val){
                this.fielPerson = this.personList.filter(item => {
                    return item.name.indexOf(val) != -1
                })
            }
        }
        
    },

    computed:{
     filePerson2(){
         let arr = this.personList.filter(item => {
            return item.name.indexOf(this.keyWork2) != -1
         })
         if (this.sortType) {
            arr =  arr.sort((p1,p2) => {
                 return this.sortType == 1?p1.age -p2.age:p2.age-p1.age
             })
         }
         return arr
     }   
    },
     methods:{
        Test(){
            this.name = "老李"
            console.log("name:",this.name);
        },
        handSort(sortType) {
            this.sortType = sortType
        }
    },
    beforeCreate(){
        console.log("beforeCreate...");
    },
    created(){
        console.log("created...");
    },
    beforeMount() {
        console.log("beforeMount...");
    },
   mounted:function(){
       console.log("mounted...");
       this.Test()
       
   },
   beforeUpdate(){
       console.log("beforeUpdate...");
   },   
   updated(){
       console.log("updated...");
   },
   beforeDestroy(){
       console.log("beforeDestroy...");
   },
   destroyed(){
       console.log("destroyed...");
   },
   
}

</script>
